<template>
  <lay-container fluid="true" style="padding: 10px">
    <lay-card>
      <lay-row>
        <lay-col :md="24">
          <lay-col :md="6">
            <lay-button size="sm" type="normal" @click="exportExcel()"
              prefix-icon="layui-icon-export">导出EXCEL</lay-button>
          </lay-col>
          <lay-col :md="18">
            <lay-form :model="queryModel" ref="layFormRef">
              <lay-row>
                <lay-col :md="4">
                  <lay-input size="sm" v-model="queryModel.nickName" style="width: 90%" placeholder="上传人"></lay-input>
                </lay-col>
                <lay-col :md="10" :lg="8">
                  <lay-form-item label="时间范围" prop="rangeTime">
                    <lay-date-picker size="sm" v-model="rangeTime" range  style="width: 90%"
                      :placeholder="['开始日期', '结束日期']"></lay-date-picker>
                  </lay-form-item>
                </lay-col>
                <lay-col :md="4">
                  <lay-form-item label-width="0">
                    <lay-button size="sm" type="primary" @click="GetList(queryModel)"
                      prefix-icon="layui-icon-search">查询</lay-button>
                    <lay-button size="sm" @click="reset">重置</lay-button>
                  </lay-form-item>
                </lay-col>
              </lay-row>
            </lay-form>
          </lay-col>
        </lay-col>
        <lay-col :md="24">
          <lay-table :page="page" :columns="columns" :dataSource="dataSource" @change="change" :size="tablesize" >
            <template v-slot:nickName="{ data }">
              {{ data.deptName }} - {{ data.nickName }}
            </template>
            <template v-slot:operator="{ data }">
              <lay-button size="sm" type="danger" @click="deleteColumn(data.id)" v-permission="PerKey.Attment_Delete"
                prefix-icon="layui-icon-delete">删除
              </lay-button>
            </template>
          </lay-table>
        </lay-col>
      </lay-row>
    </lay-card>
  </lay-container>
</template>

<script lang="ts" setup>
import { ref, toRefs, reactive } from "vue";
import { layer } from "@layui/layer-vue";
import { getList, delOne } from "../../../api/module/attment";
import { PerKey } from "../../../library/permissionConst"
import Uitl from '../../../library/Util'
const page = ref({ total: 0, limit: 10, current: 1, showRefresh: true, showCount: true, limits: [10, 15, 20, 50, 100, 200] });
const tablesize = ref('sm');
const columns = [
  { title: "Id", width: "50px", key: "id" },
  { title: "文件名", width: "180px", key: "filename" },
  { title: "URL", key: "url" },
  { title: "上传人", width: "180px", customSlot: "nickName" },
  { title: "大小kb", width: "120px", key: "size" },
  { title: "上传模块", width: "180px", key: "source" },
  { title: "上传时间", width: "220px", key: "time" },
  { title: "操作", width: "100px", customSlot: "operator", key: "operator", align: "center", }
]
const dataSource = ref([])
const rangeTime = ref([])

const putData = reactive({
  queryModel: {
    pageNum: page.value.current,
    pageSize: page.value.limit,
    startDate: "",
    endDate: "",
    nickName: "",
    exportExcel: false,
  }
})

const { queryModel } = toRefs(putData)
const layFormRef = ref();
const reset = function () {
  rangeTime.value = []
  layFormRef.value.reset()
}
const GetList = function (query: any) {
  if (query != null) {
    queryModel.value.startDate = rangeTime.value[0]
    queryModel.value.endDate = rangeTime.value[1]
    queryModel.value.nickName = query.nickName
  }
  getList(queryModel.value).then((res) => {
    if (res.status == 1) {
      dataSource.value = res.data.result
      page.value.total = res.data.totalNum
    }
  })
}
const change = function ({ current, limit }: any) {
  queryModel.value.pageNum = current
  queryModel.value.pageSize = limit
  GetList(queryModel.value);
};
const exportExcel = () => {
  layer.confirm("确认导出所有附件列表", {
    title: "警告", move: "true", shade: "false", shadeClose: "true",
    btn: [{
      text: '确认', callback: (layerId: number) => {
        queryModel.value.exportExcel = true
        getList(queryModel.value).then((res) => {
          const { filePath, fileName } = res.data
          if (res.status == 1) {
            Uitl.downloadFileForUrl(filePath, fileName)
            layer.close(layerId);
          } else {
            layer.msg('导出失败');
          }
        })
      }
    }, {
      text: '取消', callback: function (layerId: number) {
        layer.close(layerId);
      }
    }]
  })
}

const deleteColumn = function (id: number) {
  layer.confirm("确认删除ID: " + id + " 的附件", {
    title: "警告", move: "true", shade: "false", shadeClose: "true",
    btn: [{
      text: '确认', callback: (layerId: number) => {
        delOne(id).then((res) => {
          if (res.status == 1) {
            layer.msg(res.msg, { time: 1000, icon: 1 }, () => {
              GetList(queryModel.value)
            });
          } else {
            layer.msg(res.msg, { time: 1000, icon: 2 });
          }
          layer.close(layerId);
        })
      }
    }, {
      text: '取消', callback: function (layerId: number) {
        layer.close(layerId);
      }
    }]
  })
}

GetList(queryModel.value);

</script>
